<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="btn">发起ajax请求</button>

  <script>
    /* 
    1. jsonp  
    简单描述: 利用script 发送跨域请求
    前台
      创建script标签  指定src为跨域请求的url
      定义一个接收数据的函数 并将函数名指定为query参数
    后台
      确定要返回的响应数据data 后  读取回调函数
      返回函数调用的js代码 callback(data)
      const data = 'xxxx'
      const callback = req.query.callback
      res.send(`${callback} (${data})`)
    */

    document.querySelector('#btn').onclick = () => {
      // 创建script标签, 指定src为跨域的请求url
      const script = document.createElement('script')
      script.src = 'http://localhost:8081/jsonp-server?callback=fn'
      // 将script标签添加到body中 => 浏览器就会自动发请求
      document.body.appendChild(script)
    }

    // 定义一个接收数据的函数 并将函数名指定为query参数
    function fn(data){
      console.log(data);
      alert(data)
    }



  </script>
</body>

</html>